<template>
	<view>
		<view class="top"></view>
		<view class="user">
			<view class="info">
				<view class="nick-name">
					{{ userInfo.nickName }}
				</view>
				<view class="dept-name">
					{{ userInfo.dept.deptName }}
				</view>
			</view>
			<view class="avatar">
				<image src="@/static/avatar.png"></image>
			</view>
		</view>
		<view class="user-menu">
			<view class="item" hover-class="item-hover" @click="toProfile">
				<tn-icon class="icon" icon="my-fill"></tn-icon>
				个人资料
			</view>
			<view class="item" hover-class="item-hover" @click="toLog">
				<tn-icon class="icon" icon="level-fill"></tn-icon>
				操作日志
			</view>
			<view class="item" hover-class="item-hover" @click="logout">
				<tn-icon class="icon" icon="close-fill"></tn-icon>
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getInfo,
		logout
	} from '@/api/system/user'
	import {
		removeToken
	} from '@/utils/token'
	import TnIcon from '@/uni_modules/tuniaoui-icon/components/tuniaoui-icon/tuniaoui-icon.vue'

	export default {
		components: {
			TnIcon
		},
		data() {
			return {
				userInfo: {
					nickName: '',
					dept: {
						deptName: ''
					}
				}
			}
		},
		created() {
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				const app = this
				getInfo().then(result => {
					app.userInfo = result.data.user
				})
			},
			logout() {
				logout().then(result => {
					removeToken()
					uni.navigateTo({
						url: '/pages/login/index'
					})
				})
			},
			toProfile() {
				uni.navigateTo({
					url: '/pages/mine/profile'
				})
			},
			toLog() {
				uni.navigateTo({
					url: '/pages/mine/log'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 当取消原生导航栏时，top可以占据状态栏位置，避免页面内容出现在状态栏
	.top {
		height: var(--status-bar-height);
		background-color: #3498db;
	}

	// 用户信息区域样式
	.user {
		padding: 1rem;
		height: 8rem;
		display: flex;
		background-color: #3498db;
		border-radius: 0 0 1rem 1rem;

		.info {
			width: 65%;
			padding: 0.5rem;
			color: #fff;

			.nick-name {
				font-size: 2rem;
				font-weight: bold;
			}

			.dept-name {
				font-size: 1.2rem;
			}
		}

		.avatar {
			padding: 0.5rem;
			width: 4rem;
			height: 4rem;
			border: #fff solid 0.1rem;
			border-radius: 50%;
		}

		.avatar image {
			width: 4rem;
			height: 4rem;
		}
	}
	
	// 用户菜单区域样式
	.user-menu {
		margin: -2rem 1rem 0 1rem;
		height: 5.2rem;
		background-color: #fff;
		border-radius: 1rem;
		box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;

		.item {
			padding: 0.8rem;
			width: 33.33%;
			height: 4rem;
			text-align: center;
			font-size: 1rem;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.icon {
				font-size: 1.5rem;
				display: block;
			}
		}

		.item-hover {
			color: #999;
		}
	}
</style>